<template>
  <div class="header-nav">
    <nav class="navbar navbar-expand-lg navbar-light">
      <img src="../assets/img/logo.svg" alt class="logo" />

      <button
        class="navbar-toggler"
        type="button"
        data-toggle="collapse"
        data-target="#navbarTogglerDemo02"
        aria-controls="navbarTogglerDemo02"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
        <ul class="navbar-nav ml-auto mt-2 mt-lg-0">
          <li class="nav-item mr-3">
            <router-link class="nav-link" to="/">首页</router-link>
          </li>
          <li class="nav-item mr-3">
            <router-link class="nav-link" to="#">新手入门</router-link>
          </li>
          <li class="nav-item mr-3">
            <router-link class="nav-link" to="#">关于</router-link>
          </li>
          <li class="nav-item mr-3" v-if="!isLogin">
            <router-link class="nav-link" to="/login">注册</router-link>
          </li>
          <li class="nav-item mr-3" v-if="!isLogin">
            <router-link class="nav-link" to="/login">登录</router-link>
          </li>

          <li class="nav-item mr-3">
            <router-link class="nav-link" to="/">发帖</router-link>
          </li>
          <li class="nav-item mr-3">
            <router-link class="nav-link" to="/">个人信息</router-link>
          </li>
          <li class="nav-item mr-3">
            <router-link class="nav-link" to="/">退出</router-link>
          </li>
        </ul>
      </div>
    </nav>
  </div>
</template>
<script>
import $ from "../../node_modules/jquery/dist/jquery";
export default {
  name: "",
  data() {
    return {};
  },
  mounted() {
    var a = document.querySelector(".navbar-toggler");
    $(".navbar-nav li a").on("click", function() {
      a.click();
    });
  },
  computed: {
    isLogin() {
      return this.$store.state.token;
    },
  },
  methods: {},
};
</script>

<style scoped>
.header-nav {
  background: #444;
}
.logo {
  width: 130px;
  height: 60px;
}
.navbar-light .navbar-nav .nav-link {
  color: #ccc;
}
.navbar-light .navbar-nav .nav-link:hover {
  color: #fff;
}
.navbar {
  padding: 0.5rem 4rem;
}
.navbar-light .navbar-nav .nav-link:hover {
  color: #80bd01;
}
</style>
